<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
	String path = request.getContextPath();//获得项目的根目录，上下文路径
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>超市账单管理系统</title>
<link rel="stylesheet" href="css/public.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery.js"></script>
<link href="jquery-easyui-1.6.6/themes/default/easyui.css" rel="stylesheet">
<link href="jquery-easyui-1.6.6/themes/icon.css" rel="stylesheet">
<script type="text/javascript" src="jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
	//验证新密码与再次输入是否相等
 $("#submit").click(function(){
		var flag=testUserPsss($("#pass"))&testUserPass1($("#pass1"))&testUserRemi($("#pass2"));
		if(flag==0){
			return false;
		}
		return true;
	});
 //ajax失去焦点严重
	$(function(){
		$("#pass").blur(function(){
			testUserPsss($(this));
		});
	});
		function testUserPsss(t){
			//1
			var v=t.val();
			var sp=t.next();
			var div=t.parent();
			var u=$("#userName").val();
			sp.empty();
			$.ajaxSettings.async=false;//ajax同步
			var flag =false;
			//2
			$.post("testUserPsss.html",{userName:u ,pass:v},
			function(res){
				//如果占用返回false。否则其ture
				console.log(res);
				flag=res.result;
				if(!flag){
					sp.html("旧密码不正确！请输入正确的旧密码！！！");
					div.removeClass("ok").addClass("error");
					return false;
				}else{
					sp.html("旧密码正确");
					div.removeClass("error").addClass("ok");
					return true;
				}
			},
			"json"
					);
			$.ajaxSettings.async=true;//ajax同步
			return flag;
		}
		//旧密码与新密码
		$(function(){
			$("#pass1").blur(function() {
				testUserPass1($(this));
			});
		});
		
		function testUserPass1(t){
			var v= t.val();
			var sp = t.next();
			var div=t.parent();
			if (v.length == 0) {
				sp.html("不能为空！");
				div.removeClass("ok").addClass("error");
				return false;
		    } else if (v==$("#pass").val()) {
		    	sp.html("新密码与旧密码不能一致！")
		    	div.removeClass("ok").addClass("error");
		    	return false;
		    }else{
		    	sp.html("&radic;");
		    	div.removeClass("error").addClass("ok");
		        return true;
		    }
		}
		 //两次新密码
		$(function(){
			$("#pass2").blur(function() {
				testUserRemi($(this));
			});
		});
		
		function testUserRemi(t){
			var v= t.val();
			var sp = t.next();
			var div=t.parent();
			if (v.length == 0) {
				sp.html("不能为空！");
				div.removeClass("ok").addClass("error");
				return false;
		    } else if (v!=$("#pass1").val()) {
		    	sp.html("两次输入的密码必须一致！");
		    	div.removeClass("ok").addClass("error");
		    	return false;
		    }else{
		    	sp.html("&radic;");
		    	div.removeClass("error").addClass("ok");
		        return true;
		    }
		} 
		
});

</script>
</head>
<body>
<input type="hidden" value="${I.i}" id="sp"/>
	<!--头部-->
	<!-- <button id="btn">ajax</button> -->
	<header class="publicHeader">
		<h1>超市账单管理系统</h1>
		<div class="publicHeaderR">
			<p>
				<span>下午好！</span>
				<span style="color: #fff21b"> ${USER_LOGIN.userName}</span>
				, 欢迎你！
			</p>
			<a href="logOut.html">退出</a>
		</div>
	</header>
	<!--时间-->
	<section class="publicTime">
		<span id="time">2015年1月1日 11:11 星期一</span>
		<a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
	</section>
	<!--主体内容-->
	<section class="publicMian ">
		<div class="left">
			<h2 class="leftH2">
				<span class="span1"></span>
				功能列表
				<span></span>
			</h2>
			<nav>
				<ul class="list">
					<li><a href="billList.html">账单管理</a></li>
					<li><a href="providerList.ht">供应商管理</a></li>
					<li><a href="userList.html">用户管理</a></li>
					<li><a href="roleList.html">角色管理</a></li>
					<li id="active"><a href="password.html">密码修改</a></li>
					<li><a href="goodsList.du">商品购买</a></li>
					<li><a href="logOut.html">退出系统</a></li>
				</ul>
			</nav>
		</div>
		<div class="right">
			<div class="location">
				<strong>你现在所在的位置是:</strong>
				<span>密码修改页面</span>
			</div>
			<div class="providerAdd">
				<!-- 执行文件上传必须是：post 、multipart/form-data -->
				<form action="doPassWord.html" method="post"  >
					<!--div的class 为error是验证错误，ok是验证成功-->
					<div>
						<label for="userName">用户名：</label>
						<input type="text" name="userName" id="userName"  value="${USER_LOGIN.userName }"
						 style="margin-left: 18px;" onkeyup="value=value.replace(/(^\s*)|(\s*$)/g,'')"
						readonly="readonly"  />
						<span></span>
					</div>
					<div>
						<label for="pass">旧密码：</label>
						<input type="password" name="pass" id="pass" style="margin-left: 18px;" onkeyup="value=value.replace(/(^\s*)|(\s*$)/g,'')"
						/>	
						<span ></span>		
					</div>
					<div>
						<label for="pass1">请输入新密码：</label>
						<input type="password" name="pass1" id="pass1" style="margin-left: 18px;" onkeyup="value=value.replace(/(^\s*)|(\s*$)/g,'')"
						/>
						<span ></span>
					</div>
					<div>
						<label for="pass2">请再次输入：</label>
						<input type="password" name="pass2" id="pass2" style="margin-left: 18px;" onkeyup="value=value.replace(/(^\s*)|(\s*$)/g,'')"
						/>
						<span ></span>
					</div>	
					<div class="providerAddBtn">
						<input type="submit" id="submit" style="padding:0px;"/>
						<input type="reset"  style="padding:0px;width:100px;font-size:14px;"/>
					</div>	
				</form>
			</div>
		</div>
	</section>
	<footer class="footer"> 版权归北大青鸟 </footer>
	<script src="js/time.js"></script>
</body>
</html>